<template>
  <div class="pagination">
    <el-pagination
      class="page"
      background
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-size="pageSize"
      layout="prev, pager, next, jumper"
      :total="total"
    >
    </el-pagination>
  </div>
</template>

<script>
export default {
  name: "Pagination",
  props:['pageSize' ,'currentPage' , 'total' ],
  // props: {
  //   currentPage: {
  //     type: Number,
  //     default: 1,
  //   },
  //   pageSize: {
  //     type: Number,
  //     default: 10,
  //   },
  //   total: {
  //     type: Number,
  //     default: 0,
  //   },
  // },
  data() {
    return {};
  },
  methods: {
    handleCurrentChange(val) {
      this.$emit("handleCurrentChange", val);
    },
    handleSizeChange(val) {
      this.$emit("handleSizeChange", val);
    },
  },
};
</script>

<style scoped lang="scss">
.pagination {
  position: relative;
  margin-top:   10px;
  height: 32px;
}
::v-deep {
  .page {
    position: absolute;
    right: 0;
    display: inline-block !important;
  }
   .el-pager li  ,.btn-prev ,.btn-next{
    background: rgba(255, 255, 255, 0) !important;
    color: #fff !important;
    font-weight: normal;
  }
  .el-pager .active {
    color: #71F754 !important;
    border: 1px solid #71F754 !important;
  }
   .el-pager .number  {
    background: rgba(255, 255, 255, 0) ;
  }
  .el-pagination__jump {
    color: #fff !important;
  }
  .el-input__inner {
    background: transparent;
    color: #fff ;
  }
}




</style>